<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名称">
            <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
            <el-input v-model="form.nick_name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
            <uploadImg v-model="form.user_pic" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即修改</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import uploadImg from '@/components/uploadImg'
import { userUpdate } from '@/api'
export default {
    components: {
        uploadImg
    },
    data() {
        return {
            form: JSON.parse(JSON.stringify(this.$store.state.user.userInfo))
        }
    },
    methods: {
        async onSubmit() {
            if(Array.isArray(this.form.user_pic)){
                this.form.user_pic = this.form.user_pic[0].url
            }
            let res = await userUpdate(this.form)
            this.$message.success(res.message)
            this.$store.dispatch('getInfo')
        }
    }
}
</script>